<template>
	<el-form :model="form" :rules="rules" ref="rule">
		<el-form-item label="名称" prop="goods_name" :label-width="formLabelWidth">
			<el-input v-model="form.goods_name" autocomplete="off"></el-input>
		</el-form-item>
		
		<el-form-item label="分类"  prop="categoryid" :label-width="formLabelWidth">
			<el-cascader placeholder="请选择分类" v-model="form.categoryid" :props="{value:'id',label:'name'}" :options="classList"
				></el-cascader>
		</el-form-item>
		
		
		 <el-form-item label="内容"  :label-width="formLabelWidth">
		 	<editor-wang :value="form.contents" @change="changeWang"></editor-wang>		 	
		 </el-form-item>
			<!-- <div class="flex">
					 <el-form-item label="外型尺寸" :label-width="formLabelWidth">
					 	<el-input v-model="form.wxcc" autocomplete="off"></el-input>
					 </el-form-item>
					 <el-form-item label="轴距" :label-width="formLabelWidth">
					 	<el-input v-model="form.zj" autocomplete="off"></el-input>
					 </el-form-item>
					 
		</div>
		 <div class="flex">
		 			 <el-form-item label="净重" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.jz" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 <el-form-item label="坐高" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.zg" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 
		 </div>
		 <div class="flex">
		 			 <el-form-item label="最低离地距" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.zdldj" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 <el-form-item label="轮胎" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.lt" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 
		 </div>
		 
		 <div class="flex">
		 			 <el-form-item label="电机功率" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.djgl" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 <el-form-item label="控制器参数" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.kzqcs" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 
		 </div>
		 <div class="flex">
		 			 <el-form-item label="电池参数" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.dccs" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 <el-form-item label="最高车速" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.zgcs" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			 
		 </div>
		 <div class="flex">
		 			 <el-form-item label="续航里程" :label-width="formLabelWidth">
		 			 	<el-input v-model="form.xhlc" autocomplete="off"></el-input>
		 			 </el-form-item>
		 			
		 			 
		 </div> -->
		 <!-- <el-form-item label="是否上架" :label-width="formLabelWidth">
		 
		 	<el-radio-group v-model="is_on_sale" size="small">
		 		<el-radio label="1" value="1" border>是</el-radio>
		 		<el-radio label="0" value="0" border>否</el-radio>
		 	</el-radio-group>
		 </el-form-item> -->
	</el-form>
</template>

<script>
	import Draggable from 'vuedraggable'
	import {
		mounted,
		ref,
		reactive,
		toRefs
	} from "vue";
	import editorWang from '../components/wangEnduit'
	export default {

		components: {
			Draggable,editorWang
		},
		
		props: ['form', 'classList',"colorList360"],
		watch:{
			 colorList360 : {//深度监听，可监听到对象、数组的变化
			            handler(val, oldVal){
							this.picfileList=this.colorList360.goodsimg?this.colorList360.goodsimg:[];
							this.carbigimg=this.form.carbigimg?JSON.parse(this.form.carbigimg):[],
							//this.is_on_sale=this.form.is_on_sale?this.form.is_on_sale+'':'1';
			                console.log(this.form);//但是这两个值打印出来却都是一样的
			            },
			            deep:true,
						immediate: true,
			        }
			
		},
		data() {
			return {
				videoshow:true,
				is_on_sale:"1",
				dialogVisible: false,
				picfileList: [],
				carbigimg:[],
				dialogImageUrl: '',
				rules: {
				        goods_name: [
				          {
				            required: true,
				            message: '请填写名称',
				            trigger: 'blur',
				          }
				        ],
						goods_names: [
						  {
						    required: true,
						    message: '请填写简介',
						    trigger: 'blur',
						  }
						],
						categoryid: [
						  {
						    required: true,
						    message: '请选择所属分类',
						    trigger: 'change',
						  }
						],
						categoryimgs: [
						  {
						    required: true,
						    message: '请上传导航icon',
						    trigger: 'change',
						  }
						],
						categoryimg: [
						  {
						    required: true,
						    message: '请上传导航图',
						    trigger: 'change',
						  }
						],
						shop_price: [
						  {
						    required: true,
						    message: '请填写价格',
						    trigger: 'blur',
						  }
						],
						
				},
				formLabelWidth: "120px"
			}
		},
		methods: {
			changeWang(html) {
				console.log(html)
				this.form.contents=html;
			    
			},
			handlePictureCardPreview (file) {
			
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			handleRemove(index) {
				this.picfileList.splice(index, 1);
			},
			handleRemoves(index) {
				this.carbigimg.splice(index, 1);
			},
			edit360(res, file, fileList) {
                
				this.picfileList.push(res.data);
			},
			edit360s(res, file, fileList) {
			    
				this.carbigimg.push(res.data);
			},
			handleDelete() {
				ElMessageBox.confirm(
						'是否确定删除?',
						'警告', {
							confirmButtonText: '确定',
							cancelButtonText: '取消',
							type: 'warning',
						}
					)
					.then(() => {
						ElMessage({
							type: 'success',
							message: 'Delete completed',
						})
					})
					.catch(() => {
						ElMessage({
							type: 'info',
							message: 'Delete canceled',
						})
					})
			}
		},


	}
</script>

<style>
	.avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow:
			hidden;
	}

	.avatar-uploader .el-upload i {
		display: inline-flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-uploader .el-upload:hover {
		border-color: #409eff;
	}

	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 148px;
		height: 148px;
		line-height: 148px;
		text-align: center;
	}

	.avatar {
		width: 148px;
		height: 148px;
		display: block;
	}
</style>
